<template>
  <div class="wrap">
    <div class="top">
      <img src="../../../static/img/login111.png" alt="">
    </div>
    <div class="inp">
      <div class="uname">
        <img src="../../../static/img/login112.png" alt="">
        <input type="text" placeholder="手机号/账号" v-model="uname">
      </div>
      <!--     密码登录   -->
      <div class="pword" v-show="!isTel">
        <img src="../../../static/img/login113.png" alt="">
        <input :type="isLook?'text':'password'" placeholder="密码" v-model="pword">
        <p>
          <img v-show="pword.length>=1" :src="isLook?'../../../static/img/look1.png':'../../../static/img/look2.png'" alt="" class="lookPword" @click="isLook=!isLook">
        </p>
      </div>
      <!--     验证码登录   -->
      <div class="yzmLogin" v-show="isTel">
        <img src="../../../static/img/login113.png" alt="">
        <input type="text" placeholder="验证码" v-model="code">
        <p class="hqyzm" @click="obtain">{{time}}</p>
      </div>
      <div class="isWrap">
        <p class="phone_login" @click="isTel=!isTel">{{isTel?'密码登录':"手机验证码登录"}}</p>
      </div>
      <div class="btn" @click="login">立即登录</div>
<!--      <div class="msg" @click="jump('register')">还没有账号？立即注册</div>-->
    </div>
    <div class="footer"><img src="../../../static/img/login114.png" alt=""></div>
  </div>
</template>

<script>
  import qs from 'qs';

  export default {
    name: "login",
    data() {
      return {
        isLook: false, // 密码是否明文
        uname: '',
        pword: '',
        isTel: false, // 是否手机验证码登录
        time: '获取验证码', //验证码倒计时
        show: false,
        code: '', // 验证码
        token: ''
      }
    },
    mounted() {
      window.addEventListener('beforeunload', e => {
        var event = e || window.e;
        event.preventDefault ? e.preventDefault() : e.returnValue = false;
        localStorage.setItem('VerificationCodeTime', this.time)
      })
    },
    methods: {
      jump(page) {
        this.$router.push({
          name: page
        })
      },
      obtain() {
        // this.$myNotice('测试获取验证码', 1000);
        if (typeof (this.time) == "number") {
          this.$myNotice('异常错误', 1000);
          return;
        } else if (!/^1[3-9][0-9]{9}$/.test(this.uname)) {
          this.$myNotice('手机号码有误', 1000);
          return;
        }

        var time = localStorage.getItem('VerificationCodeTime');
        time = time.length >= 2 ? time : time * 1;
        if (time && typeof (time) == 'number') {
          this.time = time;
        } else {
          this.time = 60;
        }
        // this.$myNotice('要获取验证码了',1500);
        // 获取验证码
        this.$myAxios('index/Sms/send', 'post', {
          tel: this.uname,
          name: '登录验证'
        }).then(res => {
          this.token = res.data.token;
          console.log(res.data)
        });
        var timer = setInterval(() => {
          this.time -= 1;
          if (this.time <= 0) {
            clearInterval(timer);
            this.time = '重新获取';
            localStorage.setItem('VerificationCodeTime', '获取验证码')
          }
        }, 1000)
      },
      login() {
        if (this.isTel) {
          // 短信验证码登录
          this.$myAxios('index/Sms/verify', 'post', {
            code: this.code,
            token: this.token,
            mobile: this.uname,
            name: '登录验证'
          }).then(res => {
            switch (res.data.state) {
              case 1:
                // 登录成功
                this.$myNotice('登录成功!', 1000);
                this.$myAxios('api/user/usemobilelogin.html', 'post', {
                  user_id: res.data.user_id
                }).then(data => {
                  if (data.data.code == '1') {
                    this.$myAxios('index/user/head','post',{
                      user_id:res.data.user_id
                    }).then(res=>{
                      if (res.data.state == '1') {
                        console.log(res.data.user);
                        this.$myStorage.login(res.data.user.id);
                        if (res.data.user.avatar.length < 5) {
                          res.data.user.avatar = '../../../static/img/ren.png'
                        }
                        var msg = res.data;
                        var user = res.data.user;
                        user.collect_goods = msg.collect_goods;
                        user.collect_manystore = msg.collect_manystore;
                        user.browse = msg.browse;
                        user.token_lt = data.data.data.userinfo.token;
                        this.$store.state.userInfo = res.data.user;
                        this.$router.push({
                          path:'/views/Business/index'
                        });
                      }else {
                        this.$myNotice('登录失败！',1500)
                      }
                    })
                  }else {
                    this.$myNotice('登录失败！',1500)
                  }
                });
                break;
              case 10001:
                // 验证码
                this.$myNotice('验证码不对喔~', 1500);
                break;
              case 10002:
                // 验证码
                this.$myNotice('请先注册喔~', 1500);
                break;
              case 10000:
                // 验证码
                this.$myNotice('验证码已失效~', 1500);
                break;
            }
          });
        } else {
          // 手机号密码登录
          this.$myAxios('index/login/login', 'post', {
            mobile: this.uname,
            password: this.pword
          }).then(res => {
            if (res.data.state == 1) {
              this.$myAxios('api/user/usemobilelogin.html','post',{
                user_id:res.data.user_id
              }).then(data=>{
                if (data.data.code == '1') {
                  this.$myNotice('登录成功!', 1000);
                  this.$myAxios('index/user/head', 'post', {
                    user_id: res.data.user_id
                  }).then(res => {
                    console.log(res.data.user);
                    this.$myStorage.login(res.data.user.id);
                    if (res.data.user.avatar.length < 5) {
                      res.data.user.avatar = '../../../static/img/ren.png'
                    }
                    var msg = res.data;
                    var user = res.data.user;
                    user.collect_goods = msg.collect_goods;
                    user.collect_manystore = msg.collect_manystore;
                    user.browse = msg.browse;
                    user.token_lt = data.data.data.userinfo.token;
                    this.$store.state.userInfo = res.data.user;
                    this.$router.push({
                      path:'/views/Business/index'
                    });
                  });
                }else {
                  this.$myNotice('登录失败！',1500)
                }
              });

            } else if (res.data.state == 2) {
              this.$myNotice('密码错误!', 1000);

            } else {
              this.$myNotice('该账号未注册!', 1000);
            }
          })
        }
      }
    }
  }
</script>

<style scoped>
  .wrap {
    padding-top: .4rem;
  }

  .top {
    width: 100%;
    height: 3rem;
  }

  .top > img {
    width: 100%;
    max-height: 3rem;
  }

  .uname, .pword, .yzmLogin {
    width: 85%;
    height: .2rem;
    /*box-sizing: border-box;*/
    border-bottom: .01rem solid #E5E5E5;
    margin: .15rem auto;
    padding: .1rem 0;
    display: flex;
    flex-flow: row;
    align-items: center;
  }

  .yzmLogin {
    padding-bottom: .15rem;
  }

  .uname {
    margin-top: 0;
  }

  .pword {
    margin-bottom: .2rem;
    position: relative;
  }

  .pword > p {
    width: .2rem;
    height: .2rem;
    position: absolute;
    right: 0;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: flex-end;
  }

  .uname > img, .pword > img:nth-child(1), .yzmLogin > img {
    width: .14rem;
    height: .17rem;
    margin-right: .12rem;
  }

  .uname > input, .pword > input, .yzmLogin > input {
    width: 2.1rem;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    outline: none;
    border: none;
  }

  .phone_login {
    width: 1.2rem;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    text-align: right;
  }

  .hqyzm {
    width: 1.05rem;
    height: .4rem;
    background: rgba(247, 177, 23, 1);
    /*border:.01rem solid rgba(232,155,1,1);*/
    border-radius: .2rem;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-align: center;
    line-height: .4rem;
    color: #FFFFFF;
  }

  .btn {
    width: 3.15rem;
    height: .45rem;
    background: linear-gradient(0deg, rgba(253, 192, 58, 1) 0%, rgba(252, 173, 14, 1) 100%);
    border-radius: .23rem;
    margin: .2rem auto;
    font-size: .14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    text-align: center;
    line-height: .45rem;
  }

  .msg {
    font-size: .13rem;
    font-family: PingFang SC;
    font-weight: 500;
    text-decoration: underline;
    color: rgba(102, 102, 102, 1);
    text-align: center;
  }

  .isWrap {
    width: 85%;
    margin: 0 auto;
    display: flex;
    flex-flow: row;
    justify-content: flex-end;
  }

  .footer {
    width: 100%;
    margin: .3rem auto 0;
    text-align: center;
  }

  .footer > img {
    width: .76rem;
    height: .28rem;
  }

  .lookPword {
    width: .14rem;
  }


</style>
